
  
  

  


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
        <title>Ajax.InPlaceEditor - scriptaculous - GitHub</title>
    <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="GitHub" />
    <link rel="fluid-icon" href="http://github.com/fluidicon.png" title="GitHub" />

    <link href="bundle_common.css-50db3600c671ce4a4c51f918f6c22e0480bab847" tppabs="http://assets3.github.com/stylesheets/bundle_common.css?50db3600c671ce4a4c51f918f6c22e0480bab847" media="screen" rel="stylesheet" type="text/css" />
<link href="bundle_github.css-50db3600c671ce4a4c51f918f6c22e0480bab847" tppabs="http://assets3.github.com/stylesheets/bundle_github.css?50db3600c671ce4a4c51f918f6c22e0480bab847" media="screen" rel="stylesheet" type="text/css" />

    <script type="text/javascript" charset="utf-8">
      var GitHub = {}
      var github_user = null
    </script>
    <script src="jquery.min.js" tppabs="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script src="bundle_common.js-50db3600c671ce4a4c51f918f6c22e0480bab847" tppabs="http://assets1.github.com/javascripts/bundle_common.js?50db3600c671ce4a4c51f918f6c22e0480bab847" type="text/javascript"></script>
<script src="bundle_github.js-50db3600c671ce4a4c51f918f6c22e0480bab847" tppabs="http://assets2.github.com/javascripts/bundle_github.js?50db3600c671ce4a4c51f918f6c22e0480bab847" type="text/javascript"></script>

        <script type="text/javascript" charset="utf-8">
      GitHub.spy({
        repo: "madrobby/scriptaculous"
      })
    </script>

    
  <link href="http://github.com/feeds/madrobby/commits/scriptaculous/master" rel="alternate" title="Recent Commits to scriptaculous:master" type="application/atom+xml" />

    <meta name="description" content="script.aculo.us is an open-source JavaScript framework for visual effects and interface behaviours." />
    <script type="text/javascript">
      GitHub.nameWithOwner = GitHub.nameWithOwner || "madrobby/scriptaculous";
      GitHub.currentRef = "master";
    </script>
  

            <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-3769691-2']);
      _gaq.push(['_trackPageview']);
      (function() {
        var ga = document.createElement('script');
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www/') + '.google-analytics.com/ga.js';
        ga.setAttribute('async', 'true');
        document.documentElement.firstChild.appendChild(ga);
      })();
    </script>

  </head>

  

  <body>
    

    

    <div class="" id="main">
      <div id="header" class="pageheaded">
        <div class="site">
          <div class="logo">
            <a href="javascript:if(confirm('http://github.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/'" tppabs="http://github.com/"><img src="logov3.png" tppabs="http://wiki.github.com/images/modules/header/logov3.png" alt="github" /></a>
          </div>
          
          <div class="topsearch">
  
    <form action="http://github.com/search" id="top_search_form" method="get">
      <a href="javascript:if(confirm('http://github.com/search  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/search'" tppabs="http://github.com/search" class="advanced-search tooltipped downwards" title="Advanced Search">Advanced Search</a>
      <input type="search" class="search repo_autocompleter" name="q" results="5" placeholder="Search&hellip;" /> <input type="submit" value="Search" class="button" />
      <input type="hidden" name="type" value="Everything" />
      <input type="hidden" name="repo" value="" />
      <input type="hidden" name="langOverride" value="" />
      <input type="hidden" name="start_value" value="1" />
    </form>
  
  
    <ul class="nav logged_out">
      
        <li><a href="javascript:if(confirm('http://github.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/'" tppabs="http://github.com/">Home</a></li>
        <li class="pricing"><a href="javascript:if(confirm('http://github.com/plans  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/plans'" tppabs="http://github.com/plans">Pricing and Signup</a></li>
        <li><a href="javascript:if(confirm('http://github.com/explore  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/explore'" tppabs="http://github.com/explore">Explore GitHub</a></li>
        
        <li><a href="javascript:if(confirm('http://wiki.github.com/blog  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://wiki.github.com/blog'" tppabs="http://wiki.github.com/blog">Blog</a></li>
      
      <li></li>
    </ul>
  
</div>

        </div>
      </div>

      
      
        
    <div class="site">
      <div class="pagehead repohead vis-public   emptyrepohead shortdetails">
        <h1>
          <a href="javascript:if(confirm('http://github.com/madrobby  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby'" tppabs="http://github.com/madrobby">madrobby</a> / <strong><a href="javascript:if(confirm('http://github.com/madrobby/scriptaculous  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby/scriptaculous'" tppabs="http://github.com/madrobby/scriptaculous">scriptaculous</a></strong>
          
          
        </h1>

        
    <ul class="actions">
      
      
      <li class="repostats">
        <ul class="repo-stats">
          <li class="watchers"><a href="javascript:if(confirm('http://github.com/madrobby/scriptaculous/watchers  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby/scriptaculous/watchers'" tppabs="http://github.com/madrobby/scriptaculous/watchers" title="Watchers" class="tooltipped downwards">1,483</a></li>
          <li class="forks"><a href="javascript:if(confirm('http://github.com/madrobby/scriptaculous/network  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby/scriptaculous/network'" tppabs="http://github.com/madrobby/scriptaculous/network" title="Forks" class="tooltipped downwards">409</a></li>
        </ul>
      </li>
    </ul>


        <ul class="tabs">
  <li><a href="javascript:if(confirm('http://github.com/madrobby/scriptaculous/tree/master  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby/scriptaculous/tree/master'" tppabs="http://github.com/madrobby/scriptaculous/tree/master" class="false" highlight="repo_source">Source</a></li>
  <li><a href="javascript:if(confirm('http://github.com/madrobby/scriptaculous/commits/master  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby/scriptaculous/commits/master'" tppabs="http://github.com/madrobby/scriptaculous/commits/master" class="false" highlight="repo_commits">Commits</a></li>

  
  <li><a href="javascript:if(confirm('http://github.com/madrobby/scriptaculous/network  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby/scriptaculous/network'" tppabs="http://github.com/madrobby/scriptaculous/network" class="false" highlight="repo_network">Network</a></li>

  

  

  
    
    <li><a href="javascript:if(confirm('http://github.com/madrobby/scriptaculous/downloads  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby/scriptaculous/downloads'" tppabs="http://github.com/madrobby/scriptaculous/downloads" class="false">Downloads</a></li>
  

  
    
    <li><a href="index.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/" class="false">Wiki</a></li>
  

  <li><a href="javascript:if(confirm('http://github.com/madrobby/scriptaculous/graphs  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby/scriptaculous/graphs'" tppabs="http://github.com/madrobby/scriptaculous/graphs" class="false" highlight="repo_graphs">Graphs</a></li>

  <li class="contextswitch nochoices">
    <span class="toggle leftwards" >
      <em>Branch:</em>
      <code>master</code>
    </span>
  </li>
</ul>

<div style="display:none" id="pl-description"><p><em class="placeholder">click here to add a description</em></p></div>
<div style="display:none" id="pl-homepage"><p><em class="placeholder">click here to add a homepage</em></p></div>










        

      </div><!-- /.pagehead -->

      



<div id="repos">
  


<script type="text/javascript">
  GitHub.currentCommitRef = "master"
  GitHub.currentRepoOwner = "madrobby"
  GitHub.currentRepo = "scriptaculous"
  GitHub.downloadRepo = '/madrobby/scriptaculous/archives/master'
  

  
</script>








</div>

<div id="guides">
  <div class="guide">
    <!-- main content -->

    <div class="main">

      
        <div class="actions">
          <a href="index.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/">Home</a>
          | <a href="javascript:if(confirm('http://github.com/madrobby/scriptaculous/wikis/ajax-inplaceeditor/edit  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby/scriptaculous/wikis/ajax-inplaceeditor/edit'" tppabs="http://github.com/madrobby/scriptaculous/wikis/ajax-inplaceeditor/edit">Edit</a> |
          <a href="javascript:if(confirm('http://github.com/madrobby/scriptaculous/wikis/new  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby/scriptaculous/wikis/new'" tppabs="http://github.com/madrobby/scriptaculous/wikis/new">New</a>
        </div>
      

      <h1>Ajax.InPlaceEditor</h1>

      <div class="wikistyle">
        <link rel="stylesheet" title="Sunburst" href="sunburst.css" tppabs="http://script.aculo.us/github/styles/sunburst.css"/>
<script type="text/javascript" src="prototype.js" tppabs="http://script.aculo.us/prototype.js"></script><script type="text/javascript" src="scriptaculous.js" tppabs="http://script.aculo.us/scriptaculous.js"></script><script type="text/javascript" src="controls.js" tppabs="http://script.aculo.us/controls.js"></script><p style="background:#eee; border-bottom:1px solid #bbb; padding:4px 2px 2px 2px;"><a href="controls.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/controls">Controls</a> &gt; <strong>Ajax.InPlaceEditor</strong></p>
<style>.demo { font-weight: strong; border: 2px solid #FFFF99; padding: 0.5em; }</style>
<h2>Introduction</h2>
<p>The in-place “text edit” testing allows for Flickr-style <span class="caps">AJAX</span>-backed “on-the-fly” textfields.<br />
See the documentation on <a href="ajax-inplaceeditor.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor">Ajax.InPlaceEditor</a> and <a href="ajax-inplacecollectioneditor.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/ajax-inplacecollectioneditor">Ajax.InPlaceCollectionEditor</a></p>
<h2>Syntax</h2>
<pre><code class="javascript">new Ajax.InPlaceEditor( element, url, {options});</code></pre>
<p>The constructor takes three parameters. The first is the element that should support in-place editing. The second is the url to submit the changed value to. The server should respond with the updated value (the server might have post-processed it or validation might have prevented it from changing). The third is a hash of options.<br />
The server side component gets the new value as the parameter ‘value’ (<span class="caps">POST</span> method), and should send the new value as the body of the response.</p>
<h2>Options</h2>
<table>
	<tr>
		<td><em>Name</em></td>
		<td><em>since</em></td>
		<td><em>default</em></td>
		<td><em>Description</em></td>
	</tr>
	<tr>
		<td><code>okControl</code></td>
		<td> V?? </td>
		<td> “button” </td>
		<td> What type of ok button to use in edit mode, or none at all (button, link, false) </td>
	</tr>
	<tr>
		<td><code>cancelControl</code> </td>
		<td> V?? </td>
		<td> “link” </td>
		<td> What type of cancel button to use in edit mode, or none at all (button, link, false) </td>
	</tr>
	<tr>
		<td><code>okText</code></td>
		<td> V1.5 </td>
		<td> “ok” </td>
		<td> The text of the submit button that submits the changed value to the server </td>
	</tr>
	<tr>
		<td><code>cancelText</code></td>
		<td> V1.5 </td>
		<td> “cancel” </td>
		<td> The text of the link that cancels editing </td>
	</tr>
	<tr>
		<td><code>savingText</code></td>
		<td> V1.5 </td>
		<td> “Saving…” </td>
		<td> The text shown while the text is sent to the server </td>
	</tr>
	<tr>
		<td><code>clickToEditText</code></td>
		<td> V1.6 </td>
		<td> “Click to edit” </td>
		<td> The text shown during mouseover the editable text </td>
	</tr>
	<tr>
		<td><code>formId</code></td>
		<td> V1.5 </td>
		<td> id of the element to edit plus ‘InPlaceForm’ </td>
		<td> The id given to the element </td>
	</tr>
	<tr>
		<td><code>externalControl</code></td>
		<td> V1.5 </td>
		<td> null </td>
		<td> ID of an element that acts as an external control used to enter edit mode. The external control will be hidden when entering edit mode and shown again when leaving edit mode. </td>
	</tr>
	<tr>
		<td><code>externalControlOnly</code></td>
		<td> V1.5 </td>
		<td> false </td>
		<td> Whether or not to disable onclick editing so that only an external control can activate editable mode </td>
	</tr>
	<tr>
		<td><code>rows</code></td>
		<td> V1.5 </td>
		<td> 1 </td>
		<td> The row height of the input field (anything greater than 1 uses a multiline textarea for input) </td>
	</tr>
	<tr>
		<td><code>onComplete</code></td>
		<td> V1.6 </td>
		<td> “function(transport, element) {new Effect.Highlight(element, {startcolor: this.options.highlightColor});}” </td>
		<td> Code run if update successful with server </td>
	</tr>
	<tr>
		<td><code>onFailure</code></td>
		<td> V1.6 </td>
		<td> “function(transport) {alert(“Error communicating with the server: ” + transport.responseText.stripTags());}” </td>
		<td> Code run if update failed with server </td>
	</tr>
	<tr>
		<td><code>cols</code></td>
		<td> V1.5 </td>
		<td> none </td>
		<td> The number of columns the text area should span (works for both single line or multi line) </td>
	</tr>
	<tr>
		<td><code>size</code></td>
		<td> V1.5 </td>
		<td> none </td>
		<td> Synonym for ‘cols’ when using single-line (rows=1) input </td>
	</tr>
	<tr>
		<td><code>highlightColor</code></td>
		<td> ? </td>
		<td> Ajax.InPlaceEditor.defaultHighlightColor </td>
		<td> The highlight color. Must be six hex digits, not 3. </td>
	</tr>
	<tr>
		<td><code>highlightEndColor</code></td>
		<td> ? </td>
		<td> ”#FFFFFF” </td>
		<td> The color which the highlight fades to. Must be six hex digits, not 3.  </td>
	</tr>
	<tr>
		<td><code>savingClassName</code></td>
		<td> V1.5 </td>
		<td> “inplaceeditor-saving” </td>
		<td> <span class="caps">CSS</span> class added to the element while displaying “Saving…” (removed when server responds) </td>
	</tr>
	<tr>
		<td><code>formClassName</code></td>
		<td> V1.5 </td>
		<td> “inplaceeditor-form” </td>
		<td> <span class="caps">CSS</span> class used for the in place edit form </td>
	</tr>
	<tr>
		<td><code>hoverClassName</code></td>
		<td> ? </td>
		<td>	? </td>
		<td> ? </td>
	</tr>
	<tr>
		<td><code>loadTextURL</code></td>
		<td> V1.5 </td>
		<td> null </td>
		<td>  Will cause the text to be loaded from the server (useful if your text is actually textile and formatted on the server) </td>
	</tr>
	<tr>
		<td><code>loadingText</code></td>
		<td> V1.5 </td>
		<td> “Loading…” </td>
		<td> If the loadText <span class="caps">URL</span> option is specified then this text is displayed while the text is being loaded from the server </td>
	</tr>
	<tr>
		<td><code>callback</code></td>
		<td> V1.5 </td>
		<td> function(form) {Form.serialize(form)} </td>
		<td> A function that will get executed just before the request is sent to the server, should return the parameters to be sent in the <span class="caps">URL</span>. Will get two parameters, the entire form and the value of the text control. </td>
	</tr>
	<tr>
		<td><code>submitOnBlur</code></td>
		<td> V1.6 </td>
		<td> “false” </td>
		<td> This option if true will submit the in_place_edit form when the input tag loses focus. </td>
	</tr>
	<tr>
		<td><code>ajaxOptions</code></td>
		<td> V1.5 </td>
		<td> {} </td>
		<td>Options specified to all <span class="caps">AJAX</span> calls (loading and saving text), these options are passed through to the prototype <span class="caps">AJAX</span> classes. </td>
	</tr>
</table>
<p>The server side component gets the new value as the parameter ‘value&#8217; (<span class="caps">POST</span> method), and should send the new value as the body of the response.</p>
<h3>Character encoding</h3>
<p>The form data is sent encoded in <span class="caps"><span class="caps">UTF</span></span>-8 regardless of the page encoding. This is as of the prototype function Form.serialize. More info on <a href="javascript:if(confirm('http://dev.rubyonrails.org/ticket/2151  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://dev.rubyonrails.org/ticket/2151'" tppabs="http://dev.rubyonrails.org/ticket/2151">here</a>.</p>
<p>If this doesn&#8217;t work, you can use iconv as outlined <a href="javascript:if(confirm('http://wiki.rubyonrails.com/rails/pages/HowToUseUnicodeStrings  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://wiki.rubyonrails.com/rails/pages/HowToUseUnicodeStrings'" tppabs="http://wiki.rubyonrails.com/rails/pages/HowToUseUnicodeStrings">here</a>. <span style="color:red;">Link Dead!</span></p>
<h3>Removing the behavior</h3>
<p>To disable the InPlaceEditor behavior later on, store it in a variable like:</p>
<pre><code class="javascript">
 var editor = new Ajax.InPlaceEditor('product_1',...);
 (... do stuff ..)
 editor.dispose();
</code></pre>
<p>This way, you can enable and disable <span style="color:#aaa"> In Place Editing </span><a href="javascript:if(confirm('http://github.com/madrobby/scriptaculous/wikis/new?title=+In+Place+Editing  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby/scriptaculous/wikis/new?title=+In+Place+Editing'" tppabs="http://github.com/madrobby/scriptaculous/wikis/new?title=+In+Place+Editing">?</a>+ at will.</p>
<p>You can also arbitrarily force it into edit mode like so:</p>
<pre><code class="javascript">
editor.enterEditMode('click');
</code></pre>
<h2>Demo1 (Single Line Edit Mode)</h2>
<p><span style="color:red;">note</span>: the demo doesn&#8217;t actually save its changes, as <code>demoajaxreturn.html</code> is not a valid url.</p>
<pre><code class="javascript">
&lt;p id="editme"&gt;Click me, click me!&lt;/p&gt;
&lt;script type="text/javascript"&gt;
 new Ajax.InPlaceEditor('editme', '/demoajaxreturn.html');
&lt;/script&gt;
</code></pre>
<div class="demo">
<p id="editme">Click me, click me!</p>
<script type="text/javascript">
 new Ajax.InPlaceEditor('editme','http://wiki.github.com/demoajaxreturn.html');
</script>
</div>
<h2>Demo2 (Multi Line Edit Mode)</h2>
<pre><code class="javascript">
&lt;p id="editme2"&gt;Click me to edit this nice long text.&lt;/p&gt;
&lt;script type="text/javascript"&gt;
 new Ajax.InPlaceEditor('editme2', '/demoajaxreturn.html', {rows:15,cols:40});
&lt;/script&gt;
</code></pre>
<div class="demo">
<p id="editme2">Click me to edit this nice long text.</p>
<script type="text/javascript">
 new Ajax.InPlaceEditor('editme2', 'http://wiki.github.com/demoajaxreturn.html', {rows:15,cols:40});
</script>
</div>
<h2>How to specify a different name for the parameter sent to the server</h2>
<p>Add a callback function which is supposed to return the parameters that is sent to the server. Like this:</p>
<pre><code class="javascript">
new Ajax.InPlaceEditor('id', 'url', {
callback: function(form, value) { return 'myparam=' + encodeURIComponent(value) }
})
</code></pre>
<p>The <code>encodeURIComponent()</code> makes sure values containing special characters like &#8220;&amp;&#8221; or &#8220;=&#8221; don&#8217;t cause problems. Use <code>encodeURIComponent()</code> instead of <code>escape()</code> from previous examples to get <span class="caps"><span class="caps">UTF</span></span>-8 encoded data (and not &#8220;malformed <span class="caps">URI</span>&#8221; errors in Firefox). This function can also be used to pass additional parameters, such as what item or field to edit:</p>
<pre><code class="javascript">
new Ajax.InPlaceEditor('id', 'url', { 
callback: function(form, value) { return 'item=123&amp;field=description&amp;myparam='+escape(value) }
})
</code></pre>
<p>Note: this parameters name may change (to &#8220;parameters&#8221; or &#8220;with&#8221;) before the final release of 1.5.</p>
<h2>How to execute custom code using the InPlaceEditor&#8217;s callbacks.</h2>
<pre><code class="javascript">
new Ajax.InPlaceEditor(id, url, {
callback: function(form, value) { return 'item=123&amp;field=description&amp;myparam='+escape(value) },
onEnterEditMode: function(form, value) { // custom code goes here... },
onLeaveEditMode: function(form, value) { // custom code goes here... }
});
</code></pre>
<p>You can find all the possible callbacks by looking for lines in the source like this:</p>
<pre><code class="javascript">
this.triggerCallback('onEnterEditMode');
</code></pre>
<p>(Should these callback options be documented in the Options list above?)</p>
<h2>How to add a spinning in progress indicator</h2>
<p>Get an animated .gif that shows progress (the spinning image used on the Macintosh for example). Add a <span class="caps"><span class="caps">CSS</span></span> class for ‘inplaceeditor-saving&#8217; with the spinning image as background. The class will be added to the element during communication with the server and removed afterwards.</p>
<pre><code class="javascript">
&lt;style type="text/css" media="screen"&gt;
  .inplaceeditor-saving { background: url(/images/wait.gif) bottom right no-repeat; }
&lt;/style&gt;

&lt;p id="editme3"&gt;Click me, click me!&lt;/p&gt;
&lt;script type="text/javascript"&gt;
 new Ajax.InPlaceEditor('editme3', '/demoajaxreturn.html');
&lt;/script&gt;

</code></pre>
<h2>How to customize the look and feel of the form</h2>
<p>Use the id or class (‘inplaceeditor-form’) of the form in a <span class="caps"><span class="caps">CSS</span></span> selector to apply the desired style. The text field is always named ‘value’, the ok button is an input with type ‘submit’ and the cancel link is a normal anchor (‘a’) element.</p>
<pre><code class="javascript">
form.inplaceeditor-form { /* The form */
}

form.inplaceeditor-form input[type="text"] { /* Input box */
}

form.inplaceeditor-form textarea { /* Textarea, if multiple rows */
}

form.inplaceeditor-form input[type="submit"] { /* The submit button */
  margin-left:1em;
}

form.inplaceeditor-form a { /* The cancel link */
  margin-left:1em;
}
</code></pre>
<h2>How to edit server side formatted text (formatted with eg. textile)</h2>
<p>Format the text on the server when the initial page is rendered. Add a new server side action that returns the unformatted text in the reponse and specify the load <span style="color:#aaa">Text <span class="caps">URL</span></span><a href="javascript:if(confirm('http://github.com/madrobby/scriptaculous/wikis/new?title=Text+URL  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby/scriptaculous/wikis/new?title=Text+URL'" tppabs="http://github.com/madrobby/scriptaculous/wikis/new?title=Text+URL">?</a> option as a <span class="caps"><span class="caps">URL</span></span> to this action. The control will load the text from the server instead of using the text on the page. The action that receives the updated text should save it and return the formatted text as an <span class="caps"><span class="caps">HTML</span></span> snippet in the reponse.</p>
<p><strong>Example using Ruby on Rails</strong><br />
<pre><code class="javascript"></p>
<p>#controller<br />
def my_action<br />
    #get the text to display initially<br />
    @fancy_text = &#8220;Some fancy <strong>bold</strong> and <em>emphasized</em> text.&#8221; <br />
end</p>
<p>def update_text<br />
    #save your text here, and return the saved value<br />
    @fancy_text = params[:value]<br />
    render :layout =&gt; false, :inline =&gt; &#8220;&lt;%= textilize( @fancy_text ) %&gt;&#8221; <br />
end</p>
<p>def return_unformatted_text<br />
    #get your text and return it without the formatting<br />
    @fancy_text = &#8220;Some fancy edited, <strong>bold</strong> and <em>emphasized</em> text.&#8221; <br />
    render :layout =&gt; false, :inline =&gt; &#8220;&lt;%= @fancy_text %&gt;&#8221; <br />
end</p>
<p>#view ( of my_action.rhtml )</p>
<p id="editme2">&lt;%= textilize( @fancy_text ) %&gt;</p>
<script language="JavaScript">
 new Ajax.InPlaceEditor('editme2', 'update_text',
 {rows:15,cols:40,loadTextURL:'return_unformatted_text'});
</script><p></code></pre></p>
<h3>In-Place edits with select lists</h3>
<p>In my (java) application, I have a need for in-place editing in the form of select lists.  Given a server-side ajax helper that provides the necessary options for the current user, I was able to write the following:</p>
<pre><code class="javascript">
function setupCategoryEditor(el, url) {
    var editor=new Ajax.InPlaceEditor(el, url);
    Object.extend(editor, {
        createEditField: function() {
            var text=this.getText();

            var field=document.createElement("select");
            field.name="value";

            this.editField=field;
            this.form.appendChild(this.editField);

            new Ajax.Request('/url/to/option/list', {
                onSuccess: function(req) {
                    // Get the text from an XML tag.
                    var getData=function(el, which) {
                        stuff=el.getElementsByTagName(which);
                        return stuff[0].firstChild.nodeValue;
                    };
                    var cats=req.responseXML.getElementsByTagName("cat");
                    $A(cats).each( function(cat, idx) {
                        var op=document.createElement("option");
                        op.value=getData(cat, "value");
                        op.text=getData(cat, "key");
                        if(window.ActiveXObject) {
                            field.options.add(op);
                        } else {
                            field.appendChild(op);
                        }

                        // Select the current item
                        if(op.text == text) {
                            field.selectedIndex=idx;
                        }
                    });
                }
                });
        }
    });
}
</code></pre>
<p>Obviously, one could write something smaller with <span class="caps"><span class="caps">JSON</span></span> or innerHTML if you&#8217;re into that kind of thing.</p>
<p>There is another implementation of &quot; In Place Editor &#8220;:http://wiki.github.com/madrobby/scriptaculous/in-place-editor for select lists called Ajax. &#8221;color:#aaa&quot;&gt; In Place Select</span><a href="javascript:if(confirm('http://github.com/madrobby/scriptaculous/wikis/new?title=+In+Place+Select  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby/scriptaculous/wikis/new?title=+In+Place+Select'" tppabs="http://github.com/madrobby/scriptaculous/wikis/new?title=+In+Place+Select">?</a> available <a href="javascript:if(confirm('http://dev.rubyonrails.org/ticket/2667  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://dev.rubyonrails.org/ticket/2667'" tppabs="http://dev.rubyonrails.org/ticket/2667">here</a>.</p>
<p>You can change getText like so:</p>
<pre><code class="javascript">getText: function() {
  return this.element.childNodes[0] ? this.element.childNodes[0].nodeValue : '';
},</code></pre>
<p>to avoid e.g. &#8220;Me &amp; Myself&#8221; being represented in the input box as &#8220;Me &amp; amp; Myself&#8221; (use nodeValue because innerText does not work with Safari when the element is hidden).</p>
<p>- &#8211; - <br />
I just added inplace editor inside a sortable list array.  I can drag and after, the editor appears, but ideally I would not want that to happen and instead activate the editor specifically, not as a result of dragging my list items.  What is suggested here?  <br />
I tried using a drag handle, which seemed like an obvious solution, except the editor then shows the span class code as well, which is a caveat I suppose.  <br />
Unless I can use a drag handle without the method in example, then that won&#8217;t be a good solution.</p>
<p>How else can I drag or how else can I activate the editor besides writing redundant for each instance?<br />
-ms</p>
<p>I found a workaround to use draggable and Ajax.InPlaceEditor at same time. I faced also this problem mentioned above (the &#8216;mousup&#8217; action at the end of the draggable activates the editor). The solution that I found is to modify control.js to activate InPlaceEditor only on dbclick instead of click. The drawback is that you should deal with navigator compatibilty&#8230; So It consists in replacing:<br />
<pre><code class="javascript">
 Listeners: {
    click: 'enterEditMode',
    keydown: 'checkForEscapeOrReturn',
    mouseover: 'enterHover',
    mouseout: 'leaveHover'
  }
</code><br />
</pre> by<br />
<pre><code class="javascript">
 Listeners: {
    dblclick: 'enterEditMode',
    keydown: 'checkForEscapeOrReturn',
    mouseover: 'enterHover',
    mouseout: 'leaveHover'
  }
</code><br />
</pre></p>
<p>-Tonio<br />
- &#8211; -</p>
<p>I just spent a good deal of time figuring that out myself so I&#8217;ll share my result:</p>
<pre><code class="javascript">
&lt;style&gt;
div.handle {
    display: none;
    float: left;
    width: 25px;
    height: 11px;
    margin-top: 2px;
    padding-right: 3px;
    background: url('/images/drag.gif');
    background-repeat: no-repeat;
    clear: both;
}
&lt;/style&gt;
&lt;ul id="field"&gt;
    &lt;li id="field_1"&gt;

        &lt;div class="handle"&gt;&lt;/div&gt;&lt;div class="delete"&gt;&lt;/div&gt;
        &lt;span class="data" id="field_name_1"&gt;Brand&lt;/span&gt;&lt;/li&gt;
    &lt;li id="field_3"&gt;
        &lt;div class="handle"&gt;&lt;/div&gt;&lt;div class="delete"&gt;&lt;/div&gt;

        &lt;span class="data" id="field_name_3"&gt;SKU Number&lt;/span&gt;&lt;/li&gt;
    &lt;li id="field_5"&gt;
        &lt;div class="handle"&gt;&lt;/div&gt;&lt;div class="delete"&gt;&lt;/div&gt;
        &lt;span class="data" id="field_name_5"&gt;Color&lt;/span&gt;&lt;/li&gt;

&lt;/ul&gt;
&lt;a id="field_sort" href="javascript:;" onclick="makeSortable('field');"&gt;Reorder&lt;/a&gt;
&lt;a id="field_donesort" href="javascript:;" onclick="doneSorting('field');" style="display:none;"&gt;Done Reordering&lt;/a&gt;
&lt;script&gt;
function makeSortable(myid,mytag){
    Sortable.create(myid,{ tag: mytag || 'li', handle:'handle'});
    setDisplayByClass('handle','inline',$(myid));
    $(myid+'_sort').style.display = 'none';
    $(myid+'_donesort').style.display = '';
    $(myid).setAttribute('reordering','yes');
    return false;
}
function doneSorting(myid){
    new Ajax.Updater('reply',page,{parameters:'a=reorder&amp;table='+myid+'&amp;'+Sortable.serialize(myid)});
    Sortable.destroy(myid);
    setDisplayByClass('handle','none',$(myid));
    $(myid+'_sort').style.display = '';
    $(myid+'_donesort').style.display = 'none';
    $(myid).setAttribute('reordering','no');
    return false;
}
var list = getElementsByClass('data',$('fields'));
var ipeOptionsStd = {
        callback:    function(form,value){
                        var id=form.id;
                        id = id.substring(0,id.indexOf('-inplaceeditor'));
                        var t = id.substring(0,id.indexOf('_'));
                        var c = id.substring(0,id.lastIndexOf('_'));
                        var i = id.substring(id.lastIndexOf('_')+1,id.length);
                        return 'a=update&amp;table='+t+'&amp;column='+c+'&amp;id='+i+'&amp;value='+escape(value);
                    }
        };
for(var i=0;i&lt;list.length;i++){
    new Ajax.InPlaceEditor(list[i], page, ipeOptionsStd );
}

&lt;/script&gt;
</code></pre>
<p>Hope that helps, that is a much simplified version. I&#8217;ve also done this with tables where each cell is an &quot; In Place Editor &quot;:http://wiki.github.com/madrobby/scriptaculous/in-place-editor and the rows are Sortable.</p>
<p>- Colin</p>
<h3>Using <span class="caps"><span class="caps">HTML</span></span> within the In Place Editor</h3>
<p>If you are using Markdown or Textile, you can include <span class="caps"><span class="caps">HTML</span></span> within your text. And if you follow the instructions above, you will be able to load this text in from your database with <code>loadTextURL</code>. But the stripTags function is invoked by the In Place Editor, and that strips out all the code before it can be displayed in the editor field.</p>
<p>To get around this, add the following two extensions anywhere after the rest of the library has loaded. I use the extensions.js method noted elsewhere on this site.</p>
<pre><code class="javascript">
Object.extend(Ajax.InPlaceEditor.prototype, {
    onLoadedExternalText: function(transport) {
        Element.removeClassName(this.form, this.options.loadingClassName);
        this.editField.disabled = false;
        this.editField.value = transport.responseText;
        Field.scrollFreeActivate(this.editField);
    }
});

Object.extend(Ajax.InPlaceEditor.prototype, {
    getText: function() {
        return this.element.childNodes[0] ? this.element.childNodes[0].nodeValue : '';
    }
});
</code></pre>
<p>If you do this, make sure that your <code>loadTextURL</code> does not return entity-encoded text (using <code>htmlentities()</code> for example) or you will end up with double-encoded text.</p>
<h3>In-Place edits only by externalControl</h3>
<p>i searched for a way to allow editing of certain fields only by clicking the external control field. currently its implemented to allow a user to click either on the element itself or on the external control element.</p>
<p>to only allow editing by clicking on the external control, simply change a few lines:</p>
<pre><code class="javascript">
Event.observe(this.element, 'click', this.onclickListener);
Event.observe(this.element, 'mouseover', this.mouseoverListener);
Event.observe(this.element, 'mouseout', this.mouseoutListener);

if (this.options.externalControl) {
  Event.observe(this.options.externalControl, 'click', this.onclickListener);
  Event.observe(this.options.externalControl, 'mouseover', this.mouseoverListener);
  Event.observe(this.options.externalControl, 'mouseout', this.mouseoutListener);
}

change to:

if (this.options.externalControl) {
  Event.observe(this.options.externalControl, 'click', this.onclickListener);
  Event.observe(this.options.externalControl, 'mouseover', this.mouseoverListener);
  Event.observe(this.options.externalControl, 'mouseout', this.mouseoutListener);
} else {
  Event.observe(this.element, 'click', this.onclickListener);
  Event.observe(this.element, 'mouseover', this.mouseoverListener);
  Event.observe(this.element, 'mouseout', this.mouseoutListener);
}
</code></pre>
<p>maybe someone can add a flag like ‘only <span style="color:#aaa"> External Control </span><a href="javascript:if(confirm('http://github.com/madrobby/scriptaculous/wikis/new?title=+External+Control+’  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby/scriptaculous/wikis/new?title=+External+Control+’'" tppabs="http://github.com/madrobby/scriptaculous/wikis/new?title=+External+Control+’">?</a> to add this to the trunk ..</p>
<h2>Small extension to editor to add a text in case field is empty.</h2>
<pre><code class="javascript">
/*
 * InPlaceEditor extension that adds a 'click to edit' text when the field is 
 * empty.
 */
Ajax.InPlaceEditor.prototype.__initialize = Ajax.InPlaceEditor.prototype.initialize;
Ajax.InPlaceEditor.prototype.__getText = Ajax.InPlaceEditor.prototype.getText;
Ajax.InPlaceEditor.prototype.__onComplete = Ajax.InPlaceEditor.prototype.onComplete;
Ajax.InPlaceEditor.prototype = Object.extend(Ajax.InPlaceEditor.prototype, {

    initialize: function(element, url, options){
        this.__initialize(element,url,options)
        this.setOptions(options);
        this._checkEmpty();
    },

    setOptions: function(options){
        this.options = Object.extend(Object.extend(this.options,{
            emptyText: 'click to edit...',
            emptyClassName: 'inplaceeditor-empty'
        }),options||{});
    },

    _checkEmpty: function(){
        if( this.element.innerHTML.length == 0 ){
            this.element.appendChild(
                Builder.node('span',{className:this.options.emptyClassName},this.options.emptyText));
        }
    },

    getText: function(){
        document.getElementsByClassName(this.options.emptyClassName,this.element).each(function(child){
            this.element.removeChild(child);
        }.bind(this));
        return this.__getText();
    },

    onComplete: function(transport){
        this._checkEmpty();
        this.__onComplete(transport);
    }
});

</code></pre>
<p>To use, copy this into a extensions.js and load it in your app after the other scriptaculous stuff.</p>
<p>Here is the style I use with this:</p>
<pre><code class="javascript">

/* ----  InPlaceEditor style --------------------------------------------- */

.inplaceeditor-empty {
    font-style: italic;
    color: #999;
}
</code></pre>
<p>- Pedro</p>
<p>This doesn&#8217;t seem to work for me in Prototype 1.6, so I wrote an updated version. (<a href="javascript:if(confirm('http://codetocustomer.com/blog/2008/06/empty-text-for-ajaxinplaceeditor  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://codetocustomer.com/blog/2008/06/empty-text-for-ajaxinplaceeditor'" tppabs="http://codetocustomer.com/blog/2008/06/empty-text-for-ajaxinplaceeditor">Blog Post</a>).</p>
<pre><code class="javascript">

Ajax.InPlaceEditorWithEmptyText = Class.create(Ajax.InPlaceEditor, {

  initialize : function($super, element, url, options) {

    if (!options.emptyText)        options.emptyText      = “click to edit…“;
    if (!options.emptyClassName)   options.emptyClassName = “inplaceeditor-empty“;

    $super(element, url, options);

    this.checkEmpty();
  },

  checkEmpty : function() {

    if (this.element.innerHTML.length == 0 &amp;&amp; this.options.emptyText) {

      this.element.appendChild(
          new Element(“span“, { className : this.options.emptyClassName }).update(this.options.emptyText)
        );
    }

  },

  getText : function($super) {

    if (empty_span = this.element.select(“.“ + this.options.emptyClassName).first()) {
      empty_span.remove();
    }

    return $super();

  },

  onComplete : function($super, transport) {

    this.checkEmpty();
    return $super(transport);

  }

});

</code></pre>
<p>- Nik</p>
<h2>Create your own Callback</h2>
<p>I wanted to have a custom callback that would fire after the InPlaceEditor form was added to the <span class="caps">DOM</span>. <code>onEnterEditMode</code> fires as soon as you click, but the form doesn&#8217;t exist yet.</p>
<p>This works by copying an existing method <code>enterEditMode()</code>, which builds the form and writes it to the page, into a new method name so that I can edit the real one.  In mine, the original is called via <code>__enterEditMode()</code> and then my custom code is run:</p>
<pre><code class="javascript">
Ajax.InPlaceEditor.prototype.__enterEditMode = Ajax.InPlaceEditor.prototype.enterEditMode;
Object.extend(Ajax.InPlaceEditor.prototype, {
  enterEditMode:function(e) {
    this.__enterEditMode(e);
    this.triggerCallback('onFormReady',this._form);
  }
});
</code></pre>
<p>Now when I create my InPlaceEditor I just add a the <code>onFormReady</code> callback as an option:</p>
<pre><code class="javascript">
new Ajax.InPlaceEditor('location', '/change_location',
  { 
    onFormReady: function(obj,form) {
      form.getInputs().first().value = '';
    }
  });
</code></pre>
<p>In my case I wanted to clear out the value in the text box so that the user had to type something from scratch. If they cancel it will switch back to the original text.</p>
<p>- Rob</p>
<hr />
<h2 style="vertical-align:middle;">Validation.</h2>
<p>Information for implementing validation with ajax.&quot; In Place Editor &quot;:http://wiki.github.com/madrobby/scriptaculous/in-place-editor can be found <a href="javascript:if(confirm('http://wiki.rubyonrails.org/rails/pages/HowToValidateWithAjaxInPlaceEditor  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://wiki.rubyonrails.org/rails/pages/HowToValidateWithAjaxInPlaceEditor'" tppabs="http://wiki.rubyonrails.org/rails/pages/HowToValidateWithAjaxInPlaceEditor">here</a>.  <span style="color:red;">Link Dead!</span></p>
<script type="text/javascript" src="highlight.js" tppabs="http://script.aculo.us/github/highlight.js"></script><script type="text/javascript">
  hljs.initHighlightingOnLoad.apply(null, hljs.ALL_LANGUAGES);
</script><h2>suggest</h2>
<p>If &#8220;cancel control&#8221; type was &#8216;button&#8217; then&#8230; javascript error occurs.</p>
<pre><code class="javascript">
  new Ajax.InPlaceEditor(node, 'items.aspx', {
	cancelControl: 'button'
  });
</code></pre>
<p>So, I suggest the method modification of &#8216;handleFormCancellation&#8217;.</p>
<pre><code class="javascript">
  handleFormCancellation: function(e) {
    this.wrapUp();
    if (e) Event.stop(e);
    return false;
  },
</code></pre>
      </div>
    </div>

    <!-- sidebar -->

    <div class="sidebar">
      <h3>
        Pages
        <a href="javascript:if(confirm('http://wiki.github.com/madrobby/scriptaculous//wikis.atom  \n\nThis file was not retrieved by Teleport Pro, because the server reports that this file cannot be found.  \n\nDo you want to open it from the server?'))window.location='http://wiki.github.com/madrobby/scriptaculous//wikis.atom'" tppabs="http://wiki.github.com/madrobby/scriptaculous//wikis.atom"><img alt="feed" src="feed.png-50db3600c671ce4a4c51f918f6c22e0480bab847" tppabs="http://assets0.github.com/images/icons/feed.png?50db3600c671ce4a4c51f918f6c22e0480bab847" title="Feed of recent scriptaculous wiki edits" /></a>
      </h3>
      


<ul>
  
    <li><b><a href="in-place-editor.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/in-place-editor"> In Place Editor</a></b></li>
  
    <li><b><a href="ajax-autocompleter.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/ajax-autocompleter">Ajax.Autocompleter</a></b></li>
  
    <li><b><a href="ajax-inplacecollectioneditor.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/ajax-inplacecollectioneditor">Ajax.InPlaceCollectionEditor</a></b></li>
  
    <li><b><a href="ajax-inplaceeditor.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor">Ajax.InPlaceEditor</a></b></li>
  
    <li><b><a href="autocompleterbase.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/autocompleterbase">Autocompleter.Base</a></b></li>
  
    <li><b><a href="autocompleter-local.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/autocompleter-local">Autocompleter.Local</a></b></li>
  
    <li><b><a href="behaviours.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/behaviours">Behaviours</a></b></li>
  
    <li><b><a href="builder.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/builder">Builder</a></b></li>
  
    <li><b><a href="combination-effects.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/combination-effects">Combination Effects</a></b></li>
  
    <li><b><a href="combination-effects-demo.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/combination-effects-demo">Combination Effects Demo</a></b></li>
  
    <li><b><a href="contribute.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/contribute">Contribute</a></b></li>
  
    <li><b><a href="controls.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/controls">Controls</a></b></li>
  
    <li><b><a href="core-effects.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/core-effects">Core Effects</a></b></li>
  
    <li><b><a href="demos.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/demos">Demos</a></b></li>
  
    <li><b><a href="draggable.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/draggable">Draggable</a></b></li>
  
    <li><b><a href="draggables-object.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/draggables-object">Draggables Object</a></b></li>
  
    <li><b><a href="droppables.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/droppables">Droppables</a></b></li>
  
    <li><b><a href="effect-queues.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-queues">Effect Queues</a></b></li>
  
    <li><b><a href="effect-appear.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-appear">Effect.Appear</a></b></li>
  
    <li><b><a href="effect-blinddown.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-blinddown">Effect.BlindDown</a></b></li>
  
    <li><b><a href="effect-blindup.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-blindup">Effect.BlindUp</a></b></li>
  
    <li><b><a href="effect-dropout.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-dropout">Effect.DropOut</a></b></li>
  
    <li><b><a href="effect-fade.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-fade">Effect.Fade</a></b></li>
  
    <li><b><a href="effect-fold.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-fold">Effect.Fold</a></b></li>
  
    <li><b><a href="effect-grow.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-grow">Effect.Grow</a></b></li>
  
    <li><b><a href="effect-highlight.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-highlight">Effect.Highlight</a></b></li>
  
    <li><b><a href="effect-methods.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-methods">Effect.Methods</a></b></li>
  
    <li><b><a href="effect-morph.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-morph">Effect.Morph</a></b></li>
  
    <li><b><a href="effect-move.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-move">Effect.Move</a></b></li>
  
    <li><b><a href="effect-multiple.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-multiple">Effect.multiple</a></b></li>
  
    <li><b><a href="effect-opacity.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-opacity">Effect.Opacity</a></b></li>
  
    <li><b><a href="effect-parallel.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-parallel">Effect.Parallel</a></b></li>
  
    <li><b><a href="effect-puff.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-puff">Effect.Puff</a></b></li>
  
    <li><b><a href="effect-pulsate.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-pulsate">Effect.Pulsate</a></b></li>
  
    <li><b><a href="effect-scale.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-scale">Effect.Scale</a></b></li>
  
    <li><b><a href="effectscrollto.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effectscrollto">Effect.ScrollTo</a></b></li>
  
    <li><b><a href="effect-shake.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-shake">Effect.Shake</a></b></li>
  
    <li><b><a href="effect-shrink.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-shrink">Effect.Shrink</a></b></li>
  
    <li><b><a href="effect-slidedown.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-slidedown">Effect.SlideDown</a></b></li>
  
    <li><b><a href="effect-slideup.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-slideup">Effect.SlideUp</a></b></li>
  
    <li><b><a href="effect-squish.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-squish">Effect.Squish</a></b></li>
  
    <li><b><a href="effect-switchoff.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-switchoff">Effect.SwitchOff</a></b></li>
  
    <li><b><a href="effect-tagifytext.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-tagifytext">Effect.tagifyText</a></b></li>
  
    <li><b><a href="effect-toggle.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-toggle">Effect.toggle</a></b></li>
  
    <li><b><a href="effect-transitions.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effect-transitions">Effect.Transitions</a></b></li>
  
    <li><b><a href="effecttween.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effecttween">Effect.Tween</a></b></li>
  
    <li><b><a href="effects.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/effects">Effects</a></b></li>
  
    <li><b><a href="faq.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/faq">FAQ</a></b></li>
  
    <li><b><a href="formelementdelayedobserver.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/formelementdelayedobserver">Form.Element.DelayedObserver</a></b></li>
  
    <li><b><a href="ghostly.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/ghostly">Ghostly</a></b></li>
  
    <li><b><a href="ghostly-sortable-demo.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/ghostly-sortable-demo">Ghostly Sortable Demo</a></b></li>
  
    <li><b><a href="giving-elements-layout.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/giving-elements-layout">Giving Elements Layout</a></b></li>
  
    <li><b><a href="javascript:if(confirm('http://wiki.github.com/madrobby/scriptaculous  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://wiki.github.com/madrobby/scriptaculous'" tppabs="http://wiki.github.com/madrobby/scriptaculous">Home</a></b></li>
  
    <li><b><a href="license.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/license">License</a></b></li>
  
    <li><b><a href="list-morph-demo.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/list-morph-demo">List Morph Demo</a></b></li>
  
    <li><b><a href="porting.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/porting">porting</a></b></li>
  
    <li><b><a href="puzzle-demo.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/puzzle-demo">Puzzle Demo</a></b></li>
  
    <li><b><a href="ruby-on-rails.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/ruby-on-rails">Ruby on Rails</a></b></li>
  
    <li><b><a href="slider.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/slider">Slider</a></b></li>
  
    <li><b><a href="sortable.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/sortable">Sortable</a></b></li>
  
    <li><b><a href="sortable-lists-demo.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/sortable-lists-demo">Sortable Lists Demo</a></b></li>
  
    <li><b><a href="sortable-create.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/sortable-create">Sortable.create</a></b></li>
  
    <li><b><a href="sortable-sequence.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/sortable-sequence">Sortable.sequence</a></b></li>
  
    <li><b><a href="sortable-serialize.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/sortable-serialize">Sortable.serialize</a></b></li>
  
    <li><b><a href="sortables.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/sortables">Sortables</a></b></li>
  
    <li><b><a href="sortables-create.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/sortables-create">Sortables.create</a></b></li>
  
    <li><b><a href="sound.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/sound">Sound</a></b></li>
  
    <li><b><a href="style-guide.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/style-guide">Style Guide</a></b></li>
  
    <li><b><a href="tabs.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/tabs">Tabs</a></b></li>
  
    <li><b><a href="testunit.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/testunit">Test.Unit</a></b></li>
  
    <li><b><a href="testunitassertions.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/testunitassertions">Test.Unit.Assertions</a></b></li>
  
    <li><b><a href="testunitlogger.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/testunitlogger">Test.Unit.Logger</a></b></li>
  
    <li><b><a href="test-unit-runner.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/test-unit-runner">Test.Unit.Runner</a></b></li>
  
    <li><b><a href="testunittestcase.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/testunittestcase">Test.Unit.Testcase</a></b></li>
  
    <li><b><a href="unit-testing.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/unit-testing">Unit Testing</a></b></li>
  
</ul>

      
    </div>

  </div>

  <!-- admin -->

  
    <div class="admin">
      <div style="float:left;">
        <small>Last edited by <b>mrj</b>, <abbr class="relatize" title="2010-02-01 18:44:55">Mon Feb 01 18:44:55 -0800 2010</abbr></small>

        <div class="actions">
          <a href="index.htm" tppabs="http://wiki.github.com/madrobby/scriptaculous/">Home</a>
          | <a href="javascript:if(confirm('http://github.com/madrobby/scriptaculous/wikis/ajax-inplaceeditor/edit  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby/scriptaculous/wikis/ajax-inplaceeditor/edit'" tppabs="http://github.com/madrobby/scriptaculous/wikis/ajax-inplaceeditor/edit">Edit</a> |
          <a href="javascript:if(confirm('http://github.com/madrobby/scriptaculous/wikis/new  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/madrobby/scriptaculous/wikis/new'" tppabs="http://github.com/madrobby/scriptaculous/wikis/new">New</a>
        </div>
      </div>

      <div style="float:right;">
        <small>Versions:</small>
        <select id="versions_select" name="versions_select"><option value="http://github.com/madrobby/scriptaculous/wikis/ajax-inplaceeditor">Current</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/55">Version 55 by mrj</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/54">Version 54 by smith</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/53">Version 53 by etanova</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/52">Version 52 by etanova</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/51">Version 51 by etanova</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/50">Version 50 by etanova</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/49">Version 49 by SergeiKim</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/48">Version 48 by davidsomnus</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/47">Version 47 by muddana</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/46">Version 46 by sdenowh</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/45">Version 45 by cannikin</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/44">Version 44 by karmi</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/43">Version 43 by karmi</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/42">Version 42 by jessehattabaugh</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/41">Version 41 by technimad</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/40">Version 40 by technimad</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/39">Version 39 by technimad</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/38">Version 38 by technimad</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/37">Version 37 by codetocustomer</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/36">Version 36 by codetocustomer</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/35">Version 35 by michaelsica</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/34">Version 34 by michaelsica</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/33">Version 33 by michaelsica</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/32">Version 32 by thunder75</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/31">Version 31 by thunder75</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/30">Version 30 by thunder75</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/29">Version 29 by thunder75</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/28">Version 28 by thunder75</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/27">Version 27 by thunder75</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/26">Version 26 by thunder75</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/25">Version 25 by thunder75</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/24">Version 24 by thunder75</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/23">Version 23 by thunder75</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/22">Version 22 by thunder75</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/21">Version 21 by thunder75</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/20">Version 20 by thunder75</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/19">Version 19 by johnson</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/18">Version 18 by johnson</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/17">Version 17 by johnson</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/16">Version 16 by johnson</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/15">Version 15 by joe-loco</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/14">Version 14 by thunder75</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/13">Version 13 by thunder75</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/12">Version 12 by thunder75</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/11">Version 11 by thunder75</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/10">Version 10 by thunder75</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/9">Version 9 by thunder75</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/8">Version 8 by thunder75</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/7">Version 7 by thunder75</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/6">Version 6 by thunder75</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/5">Version 5 by thunder75</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/4">Version 4 by thunder75</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/3">Version 3 by thunder75</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/2">Version 2 by thunder75</option><option value="http://wiki.github.com/madrobby/scriptaculous/ajax-inplaceeditor/1">Version 1 by thunder75</option></select>
      </div>
    </div>
  
</div>



    </div>
  
      

      <div class="push"></div>
    </div>

    <div id="footer">
      <div class="site">
        <div class="info">
          <div class="links">
            <a href="javascript:if(confirm('http://github.com/blog  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/blog'" tppabs="http://github.com/blog"><b>Blog</b></a> |
            <a href="javascript:if(confirm('http://support.github.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://support.github.com/'" tppabs="http://support.github.com/">Support</a> |
            <a href="javascript:if(confirm('http://github.com/training  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/training'" tppabs="http://github.com/training">Training</a> |
            <a href="javascript:if(confirm('http://github.com/contact  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/contact'" tppabs="http://github.com/contact">Contact</a> |
            <a href="javascript:if(confirm('http://develop.github.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://develop.github.com/'" tppabs="http://develop.github.com/">API</a> |
            <a href="javascript:if(confirm('http://status.github.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://status.github.com/'" tppabs="http://status.github.com/">Status</a> |
            <a href="javascript:if(confirm('http://twitter.com/github  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://twitter.com/github'" tppabs="http://twitter.com/github">Twitter</a> |
            <a href="javascript:if(confirm('http://help.github.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://help.github.com/'" tppabs="http://help.github.com/">Help</a> |
            <a href="javascript:if(confirm('http://github.com/security  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://github.com/security'" tppabs="http://github.com/security">Security</a>
          </div>
          <div class="company">
            &copy;
            2010
            <span id="_rrt" title="0.35275s from fe1.rs.github.com">GitHub</span> Inc.
            All rights reserved. |
            <a href="javascript:if(confirm('http://wiki.github.com/site/terms  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://wiki.github.com/site/terms'" tppabs="http://wiki.github.com/site/terms">Terms of Service</a> |
            <a href="javascript:if(confirm('http://wiki.github.com/site/privacy  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://wiki.github.com/site/privacy'" tppabs="http://wiki.github.com/site/privacy">Privacy Policy</a>
          </div>
        </div>
        <div class="sponsor">
          <div>
            Powered by the <a href="javascript:if(confirm('http://www.rackspace.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://www.rackspace.com/'" tppabs="http://www.rackspace.com/">Dedicated
            Servers</a> and<br/> <a href="javascript:if(confirm('http://www.rackspacecloud.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://www.rackspacecloud.com/'" tppabs="http://www.rackspacecloud.com/">Cloud
            Computing</a> of Rackspace Hosting<span>&reg;</span>
          </div>
          <a href="javascript:if(confirm('http://www.rackspace.com/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://www.rackspace.com/'" tppabs="http://www.rackspace.com/">
            <img alt="Dedicated Server" src="rackspace_logo.png-50db3600c671ce4a4c51f918f6c22e0480bab847" tppabs="http://assets2.github.com/images/modules/footer/rackspace_logo.png?50db3600c671ce4a4c51f918f6c22e0480bab847" />
          </a>
        </div>
      </div>
    </div>

    
    
    
  </body>
</html>

